<template>
  <div class="table-wrap" v-if="DateShow">
    <div class="wrap">
      <Calendar v-on:choseDay="clickDay" v-on:changeMonth="changeDate"></Calendar>
      <!-- v-on:isToday="clickToday"
       :markDate=arr // arr=['2018/4/1','2018/4/3'] 标记4月1日和4月3日 简单标记
      :markDateMore=arr // 多种不同的标记
       :agoDayHide='1514937600' //某个日期以前的不允许点击  时间戳10位
       :futureDayHide='1525104000' //某个日期以后的不允许点击  时间戳10位
       :sundayStart="true" //默认是周一开始 当是true的时候 是周日开始 -->

      <a-form :form="form" class="form">
        <a-form-item label="打卡日期" :wrapper-col="{ span: 24 }">
          <a-input placeholder="请输入打卡日期" v-decorator="[
          '打卡日期',
          {rules: [{ required: true, message: '请输入打卡日期' }]}
        ]" />
        </a-form-item>
        <a-form-item label="项目选择" :wrapper-col="{ span: 24 }">
          <a-select v-decorator="[
          '项目选择',
          {rules: [{ required: true, message: '请输入项目选择' }]}
        ]" placeholder="请输入项目选择">
            <a-select-option value="项目A">
              项目A
            </a-select-option>
            <a-select-option value="项目B">
              项目B
            </a-select-option>
            <a-select-option value="项目C">
              项目C
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
    <div class="checkinBox sumbitButton">
      <a-button type="primary" class="buttonColorGreen" size="large">提交</a-button>
      <a-button class="buttonColorWhite" size="large" @click="canael">取消</a-button>
    </div>
  </div>
</template>

<script>
import Calendar from 'vue-calendar-component';
export default {
  components: {
    Calendar
  },
  props: {
    DateShow: {
      type: Boolean
    }
  },
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  methods: {
    canael() {
      this.$emit("update:DateShow", false)
    }
  }
}
</script>

<style scoped>
.wrap {
  display: flex;
}
>>> .wh_container {
  width: 380px;
  margin: 10px;
}
>>> .ant-input,
.ant-select {
  width: 200px;
}
>>> .wh_content_all {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #e4e4e4;
}
>>> .wh_content_item {
  height: 33px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85) !important;
}
>>> .wh_top_changge {
  font-size: 14px;
  background: #f9f9f9;
}
>>> .wh_top_changge li {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85) !important;
}
>>> .wh_jiantou1 {
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.85);
  border-left: 1px solid rgba(0, 0, 0, 0.85);
}
>>> .wh_jiantou2 {
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.85);
  border-right: 1px solid rgba(0, 0, 0, 0.85);
}
>>> .wh_content_item .wh_isToday,
>>> .wh_content_item .wh_chose_day {
  color: #fff;
  background: #1abc9c;
  border-radius: 0;
  height: 26px;
  line-height: 26px;
  padding: 0 22px;
  margin-top: 6px;
}
>>> .wh_content_item .wh_chose_day {
  color: #fff;
  background: #1abc9c;
  border-radius: 0;
  height: 26px;
  line-height: 26px;
  padding: 0 22px;
  margin-top: 6px;
}
>>> .wh_item_date:hover {
  height: 26px;
  line-height: 26px;
  margin-top: 6px;
  color: #fff;
}
>>> .wh_content {
  padding-right: 0;
  padding-left: 20px;
}
.form {
  margin: 10px 0 0 50px;
}
.checkinBox {
  display: flex;
}
.sumbitButton {
  display: flex;
  justify-content: center;
  padding-bottom: 50px;
  margin-bottom: 20px;
}
.sumbitButton button {
  margin: 20px 30px;
}
</style>

